<template>
	<slot :controller="controller" :store="store" :model="model" :isShow="isShow">
		<AppForm
			v-bind="$attrs"
			ref="searchForm"
			:name="model.codeName"
			:class="classNames"
			:data="store.data"
			style=""
			v-if="isShow"
		>
			<div class="control-content app-control-searchform__content">
				<a-row class="app-control-searchform__left">
					<slot
						name="SearchFormLeft"
						:controller="controller"
						:store="store"
						:model="model"
					>
						<AppCol
							noRoot
							:visible="store.detailModel.grouppanel1.visible"
							:layoutOpts="{
								selfLayout: 'TABLE_24COL',
								parentLayout: 'TABLE_24COL',
								colMD: 24,
							}"
						>
							<template #default="{ slotClass, slotStyle }">
								<slot
									name="grouppanel1"
									:controller="controller"
									:store="store"
									:model="model"
									:slotClass="slotClass"
									:slotStyle="slotStyle"
									:actions="{ handleComponentAction }"
								>
									<AppFormGroup
										name="grouppanel1"
										v-show="store.detailModel.grouppanel1.visible"
										:slotClass="slotClass"
										:slotStyle="slotStyle"
										:layoutOpts="{
											selfLayout: 'TABLE_24COL',
											parentLayout: 'TABLE_24COL',
											colMD: 24,
										}"
										title=""
										:enableAnchor="false"
										:showMoreItems="store.detailModel.grouppanel1.showMoreItems"
										:showMoreMode="store.detailModel.grouppanel1.showMoreMode"
										:infoGroupMode="false"
										:titleBarCloseMode="0"
										:showCaption="false"
										:uIActionGroup="store.detailModel.grouppanel1.uIActionGroup"
										@component-action="(actionParam: any) => { handleComponentAction(controller, actionParam) }"
									>
										<AppCol
											noRoot
											:visible="store.detailModel.n_name_like.visible"
											:layoutOpts="{
												parentLayout: 'TABLE_24COL',
												colLG: 12,
												colMD: 12,
											}"
										>
											<template v-slot:default="{ slotStyle, slotClass }">
												<slot
													name="n_name_like"
													:controller="controller"
													:store="store"
													:model="model"
													:slotClass="slotClass"
													:slotStyle="slotStyle"
													:actions="{ handleComponentAction }"
												>
													<AppFormItem
														name="n_name_like"
														:slotStyle="slotStyle"
														:slotClass="slotClass"
														:label="
															$t(
																'CONTROL.DEFSFITEM.OPEN_ACCESS_AUTH.N_NAME_LIKE',
																'第三方用户全局名'
															)
														"
														labelPos="LEFT"
														:labelWidth="130"
														:showLabel="true"
														:enableAnchor="false"
														:rules="store.detailModel.n_name_like.valueRule"
														:emptyCaption="false"
													>
														<div class="form-editor-container">
															<slot
																name="n_name_likeEditor"
																:controller="controller"
																:store="store"
																:model="model"
																:actions="{ handleComponentAction }"
															>
																<AppInput
																	v-bind="{ editorType: 'TEXTBOX' }"
																	type="text"
																	style=""
																	name="n_name_like"
																	:isDebounce="false"
																	:disabled="
																		store.detailModel.n_name_like.disabled
																	"
																	:value="store.data.n_name_like"
																	@component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
																/>
															</slot>
														</div>
													</AppFormItem>
												</slot>
											</template>
										</AppCol>
										<AppCol
											noRoot
											:visible="store.detailModel.n_uid_like.visible"
											:layoutOpts="{
												parentLayout: 'TABLE_24COL',
												colLG: 12,
												colMD: 12,
											}"
										>
											<template v-slot:default="{ slotStyle, slotClass }">
												<slot
													name="n_uid_like"
													:controller="controller"
													:store="store"
													:model="model"
													:slotClass="slotClass"
													:slotStyle="slotStyle"
													:actions="{ handleComponentAction }"
												>
													<AppFormItem
														name="n_uid_like"
														:slotStyle="slotStyle"
														:slotClass="slotClass"
														label="用户全局名(uid/loginname)"
														labelPos="LEFT"
														:labelWidth="130"
														:showLabel="true"
														:enableAnchor="false"
														:rules="store.detailModel.n_uid_like.valueRule"
														:emptyCaption="false"
													>
														<div class="form-editor-container">
															<slot
																name="n_uid_likeEditor"
																:controller="controller"
																:store="store"
																:model="model"
																:actions="{ handleComponentAction }"
															>
																<AppInput
																	v-bind="{ editorType: 'TEXTBOX' }"
																	type="text"
																	style=""
																	name="n_uid_like"
																	:isDebounce="false"
																	:disabled="
																		store.detailModel.n_uid_like.disabled
																	"
																	:value="store.data.n_uid_like"
																	@component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
																/>
															</slot>
														</div>
													</AppFormItem>
												</slot>
											</template>
										</AppCol>
										<AppCol
											noRoot
											:visible="store.detailModel.n_access_name_like.visible"
											:layoutOpts="{
												parentLayout: 'TABLE_24COL',
												colLG: 12,
												colMD: 12,
											}"
										>
											<template v-slot:default="{ slotStyle, slotClass }">
												<slot
													name="n_access_name_like"
													:controller="controller"
													:store="store"
													:model="model"
													:slotClass="slotClass"
													:slotStyle="slotStyle"
													:actions="{ handleComponentAction }"
												>
													<AppFormItem
														name="n_access_name_like"
														:slotStyle="slotStyle"
														:slotClass="slotClass"
														label="接入名称"
														labelPos="LEFT"
														:labelWidth="130"
														:showLabel="true"
														:enableAnchor="false"
														:rules="
															store.detailModel.n_access_name_like.valueRule
														"
														:emptyCaption="false"
													>
														<div class="form-editor-container">
															<slot
																name="n_access_name_likeEditor"
																:controller="controller"
																:store="store"
																:model="model"
																:actions="{ handleComponentAction }"
															>
																<AppInput
																	v-bind="{ editorType: 'TEXTBOX' }"
																	type="text"
																	style=""
																	name="n_access_name_like"
																	:isDebounce="false"
																	:disabled="
																		store.detailModel.n_access_name_like
																			.disabled
																	"
																	:value="store.data.n_access_name_like"
																	@component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
																/>
															</slot>
														</div>
													</AppFormItem>
												</slot>
											</template>
										</AppCol>
										<AppCol
											noRoot
											:visible="store.detailModel.n_access_type_eq.visible"
											:layoutOpts="{
												parentLayout: 'TABLE_24COL',
												colLG: 12,
												colMD: 12,
											}"
										>
											<template v-slot:default="{ slotStyle, slotClass }">
												<slot
													name="n_access_type_eq"
													:controller="controller"
													:store="store"
													:model="model"
													:slotClass="slotClass"
													:slotStyle="slotStyle"
													:actions="{ handleComponentAction }"
												>
													<AppFormItem
														name="n_access_type_eq"
														:slotStyle="slotStyle"
														:slotClass="slotClass"
														label="接入类型(=)"
														labelPos="LEFT"
														:labelWidth="130"
														:showLabel="true"
														:enableAnchor="false"
														:rules="
															store.detailModel.n_access_type_eq.valueRule
														"
														:emptyCaption="false"
													>
														<div class="form-editor-container">
															<slot
																name="n_access_type_eqEditor"
																:controller="controller"
																:store="store"
																:model="model"
																:actions="{ handleComponentAction }"
															>
																<AppDropdownList
																	codeListTag="open__Open_access_type_justAuth"
																	codeListType="STATIC"
																	v-bind="{ editorType: 'DROPDOWNLIST' }"
																	:multiple="false"
																	:context="store.context"
																	:viewParams="store.viewParams"
																	style=""
																	name="n_access_type_eq"
																	:disabled="
																		store.detailModel.n_access_type_eq.disabled
																	"
																	:value="store.data.n_access_type_eq"
																	:data="store.data"
																	@component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
																/>
															</slot>
														</div>
													</AppFormItem>
												</slot>
											</template>
										</AppCol>
									</AppFormGroup>
								</slot>
							</template>
						</AppCol>
					</slot>
				</a-row>
				<div class="app-control-searchform__right">
					<slot
						name="SearchFormRight"
						:controller="controller"
						:store="store"
						:model="model"
						:actions="{
							handleSearch,
							handleAdvSearch,
							handleShrinkButtonClick,
						}"
					>
						<a-dropdown-button
							:transfer="true"
							:trigger="['click']"
							placement="bottomRight"
							type="primary"
							@click="handleSearch"
						>
							<span>{{ $t('common.searchform.search') }}</span>
							<template #icon>
								<down-outlined />
							</template>
							<template #overlay>
								<a-menu @click="handleAdvSearch">
									<a-menu-item key="reset">
										<div class="app-control-searchform__dropdown__item">
											{{ $t('common.searchform.reset') }}
										</div>
									</a-menu-item>
									<a-menu-item key="save"> </a-menu-item>
								</a-menu>
							</template>
						</a-dropdown-button>
						<a-button
							class="app-control-searchform_shrink"
							v-if="store.hasShrinkButton"
							@click="handleShrinkButtonClick"
							>{{
								store.shrinkButtonStatus
									? $t('common.searchform.shrink')
									: $t('common.searchform.more')
							}}
						</a-button>
					</slot>
				</div>
			</div>
		</AppForm>
	</slot>
</template>
<script setup lang="ts">
// 基于template/src/widgets/{{appEntities}}/{{ctrls@SEARCHFORM}}-searchform/{{spinalCase ctrl.codeName}}-searchform-base.vue.hbs生成
import { AppCol } from '@/components/common/col';
import { AppRow } from '@/components/common/row';
import { DownOutlined } from '@ant-design/icons-vue';
import {
	AppForm,
	AppFormPage,
	AppFormGroup,
	AppFormTabPage,
	AppFormItem,
	AppFormButton,
	AppFormDruipart,
	AppFormIframe,
	AppFormRaw,
} from '@components/widgets/form';
import {
	IEvent,
	IParam,
	ISearchFormAbility,
	ISearchFormStore,
	SearchFormActionType,
} from '@/core';
import {
	useProps,
	useBasic,
	useAction,
	useController,
} from './default-searchform-hook';

let searchForm = ref<any>(null);

// 输入参数
const props = defineProps(useProps());

// 基础数据
const {
	controlID,
	getClassNames,
	model,
	useNavParamsBind,
	useEventBind,
	handleActionClick,
	handleComponentAction,
	useShow,
} = useBasic(props);

const emit = defineEmits<{
	(
		event: 'ctrl-action',
		name: string,
		action: SearchFormActionType,
		data: IParam[]
	): void;
	(event: 'ctrl-init', name: string, data: ISearchFormAbility): void;
	(event: 'ctrl-destroy', name: string, data: IParam): void;
}>();

const evt = useEventBind(emit);
//  搜索表单控制器
const controller = useController(props, evt, { controlID, searchForm });

useNavParamsBind(controller, props);

const store: ISearchFormStore = controller.getStore();

//  部件样式名
const classNames = computed(() => {
	const shrinkClass = {
		'app-control-searchform--shrink': !store.shrinkButtonStatus,
	};
	const defaultClass = getClassNames(props);
	return Object.assign(defaultClass, shrinkClass);
});

const isShow = computed(() => {
	return useShow();
});

const { handleSearch, handleAdvSearch, handleShrinkButtonClick } =
	useAction(controller);

const ctrlService = controller.getCtrlService();

onMounted(() => {
	controller.ctrlMounted();
});
onUnmounted(() => {
	controller.ctrlDestroy();
});
</script>
